<template>
  <Teleport to="body">
    <Overlay :visible="true" class="agree_content">
      <div class="agree_view">
        <div class="title agree_content">Terms and Policies</div>
        <div class="mt-[16px] des_text">
          <span>
            Before signing up to Nexbie, please read our
            <span class="color_text cursor-pointer" @click="goTerms">Terms of</span>
          </span>
          <br />
          <span class="color_text cursor-pointer" @click="goTerms">Service</span>
          and
          <span class="color_text cursor-pointer" @click="goPrivacy">Privacy Policy</span>
          .Continuing to sign up means that you agree our terms and polices.
        </div>
        <div class="flex_row mt-[24px]">
          <div class="cancel_btn cursor-pointer" @click="cancel">Cancel</div>
          <div class="confirm_btn cursor-pointer ml-[24px]" v-hover-bg @click="agreeContinue">
            Agree & Continue
          </div>
        </div>
      </div>
    </Overlay>
  </Teleport>
</template>

<script lang="ts" setup>
  import Overlay from '@/components/Overlay.vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();

  const emit = defineEmits(['cancel', 'agree']);

  const cancel = () => {
    emit('cancel');
  };

  const agreeContinue = () => {
    emit('agree');
  };

  const goTerms = () => {
    router.push('/terms');
  };

  const goPrivacy = () => {
    router.push('/privacy');
  };
</script>

<style scoped lang="scss">
  .agree_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  .agree_view {
    width: 440px;
    background: #fff;
    padding: 32px;
    border-radius: 16px;
    z-index: 3000;
    .title {
      color: var(---9, #0a0a0a);
      font-family: 'Inter Tight';
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }
    .des_text {
      color: var(---6, #7a7a7a);
      text-align: center;
      font-family: 'Inter Tight';
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%; /* 24px */
    }
    .cancel_btn {
      border-radius: 8px;
      background: var(---2, #e1e2e3);
      backdrop-filter: blur(2px);
      display: flex;
      height: 48px;
      width: 176px;
      justify-content: center;
      align-items: center;
      color: #0a0a0a;
      font-family: 'Inter Tight';
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .confirm_btn {
      display: flex;
      height: 48px;
      width: 176px;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      background: #f76b1b;
      backdrop-filter: blur(2px);
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      color: var(---0, #fff);
      font-family: 'Inter Tight';
      font-size: 16px;
    }
    .flex_row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .color_text {
      color: #f76b1b;
      border-bottom: 1px solid #f76b1b;
      padding-bottom: 1px;
    }
    .color_text:hover {
      color: #e55c0d;
      border-bottom: 1px solid #e55c0d;
    }
  }
</style>
